/*格式说明:
    container宽度为屏幕80%
    .container-all 为屏幕百分之百宽度，左右有细微边距
    row的一行有12个格子
    row的子元素通过colo-xxx-xxx-数字的形式来描述一行占位多少
    col-max-576-xx(表示屏幕尺寸小于576时的响应单位)

    col-min-576-xx(表示屏幕尺寸大于等于576时的响应单位)
    col-min-768-xx(表示屏幕尺寸大于等于768时的响应单位)
    col-min-960-xx(表示屏幕尺寸大于等于960时的响应单位)
    col-min-1140-xx(表示屏幕尺寸大于等于1140时的响应单位)

    本栅格系统中，行与列之间没有默认间距，可以进行自定义设置
*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html,
body {
  scroll-behavior: smooth;
}
.container {
  display: flex;
  width: 80vw;
  flex-direction: column;
  margin: auto;
}
.container-all {
  display: flex;
  width: 100vw;
  padding: 0 0.5vw;
  flex-direction: column;
  margin: auto;
}
.row {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(12, 1fr);
}
@media (max-width: 576px) {
  .row > .col-max-576-1 {
    grid-column: span 1;
  }
  .row > .col-max-576-2 {
    grid-column: span 2;
  }
  .row > .col-max-576-3 {
    grid-column: span 3;
  }
  .row > .col-max-576-4 {
    grid-column: span 4;
  }
  .row > .col-max-576-5 {
    grid-column: span 5;
  }
  .row > .col-max-575-6 {
    grid-column: span 6;
  }
  .row > .col-max-576-7 {
    grid-column: span 7;
  }
  .row > .col-max-576-8 {
    grid-column: span 8;
  }
  .row > .col-max-576-9 {
    grid-column: span 9;
  }
  .row > .col-max-576-10 {
    grid-column: span 10;
  }
  .row > .col-max-576-11 {
    grid-column: span 11;
  }
  .row > .col-max-576-12 {
    grid-column: span 12;
  }
}
@media (min-width: 576px) {
  .row > .col-min-576-1 {
    grid-column: span 1;
  }
  .row > .col-min-576-2 {
    grid-column: span 2;
  }
  .row > .col-min-576-3 {
    grid-column: span 3;
  }
  .row > .col-min-576-4 {
    grid-column: span 4;
  }
  .row > .col-min-576-5 {
    grid-column: span 5;
  }
  .row > .col-min-576-6 {
    grid-column: span 6;
  }
  .row > .col-min-576-7 {
    grid-column: span 7;
  }
  .row > .col-min-576-8 {
    grid-column: span 8;
  }
  .row > .col-min-576-9 {
    grid-column: span 9;
  }
  .row > .col-min-576-10 {
    grid-column: span 10;
  }
  .row > .col-min-576-11 {
    grid-column: span 11;
  }
  .row > .col-min-576-12 {
    grid-column: span 12;
  }
}
@media (min-width: 576px) {
  .row > .col-min-576-1 {
    grid-column: span 1;
  }
  .row > .col-min-576-2 {
    grid-column: span 2;
  }
  .row > .col-min-576-3 {
    grid-column: span 3;
  }
  .row > .col-min-576-4 {
    grid-column: span 4;
  }
  .row > .col-min-576-5 {
    grid-column: span 5;
  }
  .row > .col-min-576-6 {
    grid-column: span 6;
  }
  .row > .col-min-576-7 {
    grid-column: span 7;
  }
  .row > .col-min-576-8 {
    grid-column: span 8;
  }
  .row > .col-min-576-9 {
    grid-column: span 9;
  }
  .row > .col-min-576-10 {
    grid-column: span 10;
  }
  .row > .col-min-576-11 {
    grid-column: span 11;
  }
  .row > .col-min-576-12 {
    grid-column: span 12;
  }
}
@media (min-width: 768px) {
  .row > .col-min-768-1 {
    grid-column: span 1;
  }
  .row > .col-min-768-2 {
    grid-column: span 2;
  }
  .row > .col-min-768-3 {
    grid-column: span 3;
  }
  .row > .col-min-768-4 {
    grid-column: span 4;
  }
  .row > .col-min-768-5 {
    grid-column: span 5;
  }
  .row > .col-min-768-6 {
    grid-column: span 6;
  }
  .row > .col-min-768-7 {
    grid-column: span 7;
  }
  .row > .col-min-768-8 {
    grid-column: span 8;
  }
  .row > .col-min-576-9 {
    grid-column: span 9;
  }
  .row > .col-min-768-10 {
    grid-column: span 10;
  }
  .row > .col-min-768-11 {
    grid-column: span 11;
  }
  .row > .col-min-768-12 {
    grid-column: span 12;
  }
}
@media (min-width: 960px) {
  .row > .col-min-960-1 {
    grid-column: span 1;
  }
  .row > .col-min-960-2 {
    grid-column: span 2;
  }
  .row > .col-min-960-3 {
    grid-column: span 3;
  }
  .row > .col-min-960-4 {
    grid-column: span 4;
  }
  .row > .col-min-960-5 {
    grid-column: span 5;
  }
  .row > .col-min-960-6 {
    grid-column: span 6;
  }
  .row > .col-min-960-7 {
    grid-column: span 7;
  }
  .row > .col-min-960-8 {
    grid-column: span 8;
  }
  .row > .col-min-960-9 {
    grid-column: span 9;
  }
  .row > .col-min-960-10 {
    grid-column: span 10;
  }
  .row > .col-min-960-11 {
    grid-column: span 11;
  }
  .row > .col-min-960-12 {
    grid-column: span 12;
  }
}
@media (min-width: 1140px) {
  .row > .col-min-1140-1 {
    grid-column: span 1;
  }
  .row > .col-min-1140-2 {
    grid-column: span 2;
  }
  .row > .col-min-1140-3 {
    grid-column: span 3;
  }
  .row > .col-min-1140-4 {
    grid-column: span 4;
  }
  .row > .col-min-1140-5 {
    grid-column: span 5;
  }
  .row > .col-min-1140-6 {
    grid-column: span 6;
  }
  .row > .col-min-1140-7 {
    grid-column: span 7;
  }
  .row > .col-min-1140-8 {
    grid-column: span 8;
  }
  .row > .col-min-1140-9 {
    grid-column: span 9;
  }
  .row > .col-min-1140-10 {
    grid-column: span 10;
  }
  .row > .col-min-1140-11 {
    grid-column: span 11;
  }
  .row > .col-min-1140-12 {
    grid-column: span 12;
  }
}
